<script setup>
import { alertListApi } from '@/apis/index.js'
import { alerttApi, alerttTypeApi, alerttStatusApi } from '@/apis/serviceWorkbench.js'
import { ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'

const alertType = ref({})
const getAlerttTypeList = async () => {
	const res = await alerttTypeApi()
	alertType.value = Object.fromEntries(
		res.data.map(item => [item.dictSort, item.dictLabel])
	)
}
getAlerttTypeList()

const alertStatys = ref({})
const getAlerttStatusList = async () => {
	const res = await alerttStatusApi()
	alertStatys.value = Object.fromEntries(
		res.data.map(item => [item.dictSort, item.dictLabel])
	)
}
getAlerttStatusList()

const params = ref({
	pageSize: 10,
	pageNum: 1
})
const loadStatus = ref({
	status: "loadmore",
	noMore: false,
	loading: false
})
const alertList = ref([])
const getAlertList = async () => {
	// 防止重复加载
	if (loadStatus.value.noMore || loadStatus.value.loading) return
	loadStatus.value.loading = true
	loadStatus.value.status = "loading"
	try {
		const res = await alertListApi(params.value)
		const { rows, total } = res
		// 如果是第一页，重置数据
		if (params.value.pageNum === 1) {
			alertList.value = rows
		} else {
			alertList.value = [...alertList.value, ...rows]
		}
		// 判断是否还有更多数据
		if (rows.length < params.value.pageSize || alertList.value.length >= total) {
			loadStatus.value.noMore = true
			loadStatus.value.status = "nomore"
		} else {
			loadStatus.value.status = "loadmore"
		}
		// 只有成功获取数据后才增加页码
		params.value.pageNum++
	} catch {
		// 失败时恢复状态
		loadStatus.value.status = "loadmore"
	} finally {
		loadStatus.value.loading = false
	}
}
getAlertList()

onReachBottom(() => {
	if (!loadStatus.value.noMore) {
		getAlertList()
	}
})

const show = ref(false)
const currentObj = ref({})
const changeAlert = (item) => {
	show.value = true
	currentObj.value = { ...item }
}
// 2 表示已处理
const resolveStatus = '2'
const handlerConfirm = async () => {
	try {
		currentObj.value.resolveStatus = resolveStatus
		alerttApi(currentObj.value)
		uni.$u.toast("处理完成")
		// 更新对应的列表项
		const index = alertList.value.findIndex(item => item.alertId === currentObj.value.alertId)
		if (index !== -1) {
			// 创建一个新数组以确保响应性
			alertList.value = [
				...alertList.value.slice(0, index),
				{
					...alertList.value[index],
					resolveStatus: resolveStatus, // 标记为已处理
					resolveContent: currentObj.value.resolveContent, // 更新处理内容
					updateTime: new Date().toLocaleString() // 更新时间，根据实际需求调整格式
				},
				...alertList.value.slice(index + 1)
			]
		}
		show.value = false
	} catch { }
}
</script>

<template>
	<view class=" page_container">
		<template v-if="alertList.length">
			<view class="alert-card" v-for="item in alertList" :key="item">
				<view class="alert-header">
					<view class="alert-type">
						<text class="type-icon">⚠️</text>
						<text>{{ alertType[item.alertType] }}</text>
					</view>
					<view class="alert-status processed" :class="{ unprocessed: item.resolveStatus === '2' }">
						{{ alertStatys[item.resolveStatus] }}
					</view>
				</view>
				<view class="alert-body">
					<view class="alert-item">
						<text class="item-label">预警内容:</text>
						<text class="item-value">{{ item.alertName }}</text>
					</view>
					<view class="alert-item">
						<text class="item-label">处理内容:</text>
						<text class="item-value">{{ item.resolveContent }}</text>
					</view>
				</view>
				<view class="alert-footer">
					<view class="alert-time"> {{ item.updateTime }} </view>
					<view class="alert-btn" v-if="item.resolveStatus === '1'" @click="changeAlert(item)"> 处理 </view>
				</view>
			</view>
			<u-loadmore :status="loadStatus.status" />
		</template>
		<view v-else>
			<u-empty mode="list"></u-empty>
		</view>
	</view>
	<u-modal v-model="show" :title="currentObj.alertName" show-cancel-button @confirm="handlerConfirm">
		<view class="slot-content">
			<u-input v-model="currentObj.resolveContent" focus type="textarea" border placeholder="请输入处理内容" />
		</view>
	</u-modal>
</template>


<style lang="scss" scoped>
.slot-content {
	padding: 20rpx;
	padding-top: 30rpx;
}

.alert-card {
	width: 100%;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	padding: 24rpx;
	margin-bottom: 24rpx;

	.alert-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f5f5f5;
		margin-bottom: 16rpx;

		.alert-type {
			display: flex;
			align-items: center;
			font-size:$title-font-size;
			font-weight: bold;
			color: #333;

			.type-icon {
				margin-right: 8rpx;
				color: #faad14;
			}
		}

		.alert-status {
			font-size: 26rpx;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;

			&.processed {
				background: #f6ffed;
				color: #52c41a;
				border: 1rpx solid #b7eb8f;
			}

			&.unprocessed {
				background: #fff1f0;
				color: #f5222d;
				border: 1rpx solid #ffa39e;
			}
		}
	}

	.alert-body {
		.alert-item {
			display: flex;
			margin-bottom: 12rpx;
			font-size: $list-font-size;

			.item-label {
				color: #666;
				width: 140rpx;
				flex-shrink: 0;
			}

			.item-value {
				color: $list-color;
				flex: 1;
				word-break: break-all;
			}
		}
	}

	.alert-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 1rpx solid #f5f5f5;

		.alert-time {
			font-size: 28rpx;
			color: #999;
		}

		.alert-btn {
			font-size: 24rpx;
			color: #1890ff;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			border: 1rpx solid #1890ff;
			background: #e6f7ff;
		}
	}
}
</style>